// 用来获取设置路径用的
const path = require('path')

// 导入 html 的打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 导入 css 独立文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 导入 vue 的加载器
const VueLoader = require('vue-loader/lib/plugin')

// 就是 webpack 的配置
module.exports = {
    // 配置环境
    // development： 开发环境(写代码的阶段)
    // production: 生产环境(代码已经写好了部署到服务器的代码)
    // production: 测试环境(代码已经写好了，但是还没有部署到服务器的代码)
    mode: 'development',
    // 配置项目入口
    // entry: './src/main.js'
    entry: {
        app: './src/main.js'
    },
    // 配置项目的出口
    output: {
        // 设置打包之后文件放在 dist 目录下
        // __dirname 获取到的是当前文件所在的目录路径
        path: path.resolve(__dirname, 'dist'),
        // filename 配置文件打包后的名字
        // [name] 获取入口名称 app
        // [hash:8] 随机 8 位字符
        // .js 就是我们的后缀名
        // app.adj23gh5.js
        filename: 'js/[name].[hash:8].js',
        // 清除之前打包的文件，有新的文件后，之前的文件就不用了
        clean: true
    },
    // 配置插件的地方
    plugins: [
        // 配置 vue 插件
        new VueLoader(),
        // 将 ./public/index.html 配置为咱们的主要 html 文件
        // 要打包的 html 文件
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        // 配置打包独立 css 文件之后的名称
        new MiniCssExtractPlugin({
            filename: 'css/[hash:8].css'
        })
    ],
    // 加载器的配置
    module: {
        rules: [
            // 配置 .css 结尾的文件使用对应的加载器
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },{
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },{
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            }, {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env', // js 的新语法
                            '@babel/preset-react' // react 的语法
                        ]
                    }
                } 
            }, {
                // 配置图片加载器
                test: [/\.jpe?g$/, /\.png$/, /\.gif$/, /\.weeb$/],
                type: 'asset', // 通用 资源类型
                parser: {
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb
                    }
                }
            }, {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ]
    },
    // 配置别名和忽略名
    resolve: {
        // 配置无需后缀名
        extensions: ['.js','.ts','.jsx','.tsx','.vue'],
        // 配置 @ 为 src 路径
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    },
    // 配置服务器代理
    devServer: {
        port: 3000,
        proxy: {
            '/api': {
                // 代理的地址
                target: 'http://open.douyucdn.cn',
                // 默认情况下，代理时会保留主机头的来源，可以将 changeOrigin 设置为 true 以覆盖此行为。
                changeOrigin: true
            }
          },
    }
}
